<template>
  <view class="exercise-mode">    
    <!-- 运动数据统计 -->
    <view class="exercise-stats">
      <view class="stat-card">
        <view class="stat-icon time-icon">
          <image src="/static/logo.png" mode="aspectFit"></image>
        </view>
        <view class="stat-value">60</view>
        <view class="stat-label">运动时长 (分钟)</view>
      </view>
      
      <view class="stat-card">
        <view class="stat-icon calorie-icon">
          <image src="/static/logo.png" mode="aspectFit"></image>
        </view>
        <view class="stat-value">268</view>
        <view class="stat-label">热量消耗 (千卡)</view>
      </view>
    </view>
    
    <!-- 运动模式选择 -->
    <view class="mode-section">
      <view class="section-header">
        <view class="section-title">运动模式</view>
        <view class="section-link" @tap="goToExerciseRecord">运动记录</view>
      </view>
      
      <view class="mode-grid">
        <view 
          class="mode-item" 
          v-for="(item, index) in exerciseModes" 
          :key="index"
          :class="{ active: currentMode === item.id }"
          @tap="selectMode(item.id)"
        >
          <view class="mode-icon">
            <image :src="item.icon" mode="aspectFit"></image>
          </view>
          <view class="mode-name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    
    <!-- 运动时长输入 -->
    <view class="duration-section">
      <view class="section-title">运动时长</view>
      <view class="duration-input">
        <input 
          type="number" 
          v-model="duration" 
          placeholder="请输入运动时长" 
          @input="onDurationInput"
        />
        <view class="unit">分钟</view>
      </view>
    </view>
    
    <!-- AI助手提示 -->
    <view class="ai-assistant">
      <view class="ai-header">
        <view class="ai-avatar">
          <image src="/static/logo.png" mode="aspectFit"></image>
        </view>
        <view class="ai-title">AI智能小贴士</view>
      </view>
      
      <view class="ai-content">
        规律运动可提升肺部弹性和心肺功能，辅助调节控制血糖增强心肺功能，降低心血管疾病双风险；促进脂肪代谢，维持健康体重；改善代谢机能并释放内啡肽，缓解压力焦虑；长期坚持能预防慢性病、延缓衰老，以最低成本实现身心健康双提升。
      </view>
    </view>
    
    <!-- 保存按钮 -->
    <view class="save-btn" @tap="saveExercise">保存</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的运动模式
      currentMode: 'walking',
      // 运动时长（分钟）
      duration: '',
      // 热量消耗（千卡）
      calories: 268,
      // 运动模式列表
      exerciseModes: [
        { id: 'basketball', name: '篮球', icon: '/static/logo.png' },
        { id: 'walking', name: '步行', icon: '/static/logo.png' },
        { id: 'swimming', name: '游泳', icon: '/static/logo.png' },
        { id: 'football', name: '足球', icon: '/static/logo.png' },
        { id: 'running', name: '跑步', icon: '/static/logo.png' },
        { id: 'gymnastics', name: '体操', icon: '/static/logo.png' },
        { id: 'tennis', name: '网球', icon: '/static/logo.png' },
        { id: 'rope', name: '跳绳', icon: '/static/logo.png' },
        { id: 'yoga', name: '瑜伽', icon: '/static/logo.png' },
        { id: 'badminton', name: '羽毛球', icon: '/static/logo.png' },
        { id: 'cycling', name: '自行车', icon: '/static/logo.png' },
        { id: 'taichi', name: '太极拳', icon: '/static/logo.png' }
      ]
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 跳转到运动记录页面
    goToExerciseRecord() {
      uni.navigateTo({
        url: '/pages/exercise-record/index'
      });
    },
    
    // 选择运动模式
    selectMode(modeId) {
      this.currentMode = modeId;
      // 根据不同的运动模式计算热量消耗（这里只是模拟）
      this.calculateCalories();
    },
    
    // 运动时长输入事件
    onDurationInput() {
      // 根据时长计算热量消耗
      this.calculateCalories();
    },
    
    // 计算热量消耗
    calculateCalories() {
      // 这里只是模拟计算，实际项目中应该有更精确的计算公式
      if (!this.duration) {
        this.calories = 0;
        return;
      }
      
      // 不同运动模式的热量消耗系数（模拟数据）
      const calorieFactors = {
        basketball: 8,
        walking: 4.5,
        swimming: 10,
        football: 8,
        running: 9,
        gymnastics: 6,
        tennis: 7,
        rope: 11,
        yoga: 4,
        badminton: 7,
        cycling: 6,
        taichi: 4
      };
      
      // 计算热量消耗
      const factor = calorieFactors[this.currentMode] || 5;
      this.calories = Math.round(factor * parseFloat(this.duration));
    },
    
    // 保存运动记录
    saveExercise() {
      // 表单验证
      if (!this.currentMode) {
        uni.showToast({
          title: '请选择运动模式',
          icon: 'none'
        });
        return;
      }
      
      if (!this.duration) {
        uni.showToast({
          title: '请输入运动时长',
          icon: 'none'
        });
        return;
      }
      
      // 构建运动记录数据
      const exerciseRecord = {
        mode: this.currentMode,
        duration: this.duration,
        calories: this.calories,
        date: new Date().toISOString()
      };
      
      // 显示保存中
      uni.showLoading({
        title: '保存中...'
      });
      
      // 模拟保存过程
      setTimeout(() => {
        uni.hideLoading();
        
        // 提示保存成功
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        });
        
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1000);
    }
  }
}
</script>

<style lang="scss">
.exercise-mode {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  // 导航栏
  .nav-bar {
    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 0 30rpx;
    background-color: #fff;
    
    .back-icon {
      width: 44rpx;
      height: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: 500;
    }
    
    .action-icons {
      display: flex;
      gap: 30rpx;
      
      .iconfont {
        font-size: 44rpx;
      }
    }
  }
  
  // 运动数据统计
  .exercise-stats {
    display: flex;
    padding: 30rpx;
    background-color: #fff;
    
    .stat-card {
      flex: 1;
      background-color: #fff;
      border-radius: 12rpx;
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
      
      &:first-child {
        margin-right: 20rpx;
      }
      
      .stat-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
        
        image {
          width: 100%;
          height: 100%;
        }
        
        &.time-icon {
          color: #00bcd4;
        }
        
        &.calorie-icon {
          color: #ff5722;
        }
      }
      
      .stat-value {
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 6rpx;
      }
      
      .stat-label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  // 运动模式部分
  .mode-section {
    margin-top: 20rpx;
    padding: 30rpx;
    background-color: #fff;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      
      .section-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        position: relative;
        padding-left: 20rpx;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6rpx;
          height: 30rpx;
          background-color: #3498db;
          border-radius: 3rpx;
        }
      }
      
      .section-link {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .mode-grid {
      display: flex;
      flex-wrap: wrap;
      
      .mode-item {
        width: 33.33%;
        height: 150rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 20rpx;
        
        .mode-icon {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 10rpx;
          
          image {
            width: 100%;
            height: 100%;
          }
        }
        
        .mode-name {
          font-size: 26rpx;
          color: #333;
        }
        
        &.active {
          background-color: #e1f5fe;
          border-radius: 8rpx;
          
          .mode-name {
            color: #0288d1;
          }
        }
      }
    }
  }
  
  // 运动时长输入
  .duration-section {
    margin-top: 20rpx;
    padding: 30rpx;
    background-color: #fff;
    
    .section-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 20rpx;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 30rpx;
        background-color: #3498db;
        border-radius: 3rpx;
      }
    }
    
    .duration-input {
      display: flex;
      align-items: center;
      height: 80rpx;
      background-color: #f9f9f9;
      border-radius: 8rpx;
      padding: 0 20rpx;
      
      input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
      }
      
      .unit {
        font-size: 28rpx;
        color: #666;
        margin-left: 10rpx;
      }
    }
  }
  
  // AI助手提示
  .ai-assistant {
    margin-top: 20rpx;
    padding: 30rpx;
    background-color: #f0f7ff;
    
    .ai-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .ai-avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 30rpx;
        background-color: #e1f5fe;
        overflow: hidden;
        margin-right: 16rpx;
        
        image {
          width: 100%;
          height: 100%;
        }
      }
      
      .ai-title {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
    
    .ai-content {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
  
  // 保存按钮
  .save-btn {
    margin: 40rpx 30rpx;
    height: 90rpx;
    background-color: #00bcd4;
    color: #fff;
    font-size: 32rpx;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
